<!doctype html>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="apple-touch-icon-precomposed" sizes="57x57" href="favicon/apple-touch-icon-57x57.png" />
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon/apple-touch-icon-114x114.png" />
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon/apple-touch-icon-72x72.png" />
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon/apple-touch-icon-144x144.png" />
  <link rel="apple-touch-icon-precomposed" sizes="60x60" href="favicon/apple-touch-icon-60x60.png" />
  <link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon/apple-touch-icon-120x120.png" />
  <link rel="apple-touch-icon-precomposed" sizes="76x76" href="favicon/apple-touch-icon-76x76.png" />
  <link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon/apple-touch-icon-152x152.png" />
  <link rel="icon" type="image/png" href="favicon/favicon-196x196.png" sizes="196x196" />
  <link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/png" href="favicon/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="favicon/favicon-16x16.png" sizes="16x16" />
  <link rel="icon" type="image/png" href="favicon/favicon-128.png" sizes="128x128" />
  <meta name="application-name" content="Beer Share" />
  <meta name="msapplication-TileColor" content="#FFFFFF" />
  <meta name="msapplication-TileImage" content="favicon/mstile-144x144.png" />
  <meta name="msapplication-square70x70logo" content="favicon/mstile-70x70.png" />
  <meta name="msapplication-square150x150logo" content="favicon/mstile-150x150.png" />
  <meta name="msapplication-wide310x150logo" content="favicon/mstile-310x150.png" />
  <meta name="msapplication-square310x310logo" content="favicon/mstile-310x310.png" />


  <title>Beer Share</title>

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <!-- Custom styles for this template -->
  <link href="css/style.css" rel="stylesheet">
</head>

<body>

  <header>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

      <div class="container">
        <a class="navbar-brand" href="#">Bem-Vindo</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#beerCollapse" aria-controls="navbarCollapse"
          aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="beerCollapse">

          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Como funciona</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Sobre nós</a>
            </li>
          </ul>

          <ul class="nav justify-content-center float-right my-4 my-sm-0">
            <li class="nav-item">
              <a class="btn btn-primary my-4 my-sm-0" href="#" role="button" data-toggle="modal" data-target="#signupModalCenter">Registre-se
                gratuitamente</a>
            </li>
            <li class="nav-item">
              <a class="mx-2 btn btn-success" href="#" role="button">Entrar</a>
            </li>
          </ul>

        </div>
      </div>

    </nav>

  </header>

  <!--  main jumbotron -->

  <div id="main" class="container-fluid d-flex align-items-center text-center">

    <main role="main" class="container">

      <section class="jumbotron text-center">

        <h1 class="jumbotron-heading">Beer Share</h1>

        <p class="lead">Junte-se à maior rede social para cervejeiros do Brasil.</p>
        <p>Este é um lugar criado para quem ama cerveja. Descubra novos sabores, receitas, cervejarias e
          cervejeiros/amigos..</p>

        <a class="btn btn-lg btn-primary" href="#" role="button" data-toggle="modal" data-target="#signupModalCenter">Registre-se</a>
        <a role="button" class="btn btn-lg btn-success" href="#">Entrar</a>

      </section>

    </main>


  </div>


  <!-- end main jumbotron -->


  <!-- section food -->
  <section class="container py-4 bg-light">

    <div class="row">

      <div class="col-10 offset-1 offset-sm-0 col-sm-6 col-md-3 mb-3">

        <div class="card">
          <!-- <img class="card-img-top" src="http://lorempixel.com/200/300/food/1" alt="Card image cap"> -->
          <img class="card-img-top" src="lorem/food-1.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Planar Black Pepper Cookies</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
              card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-10 offset-1 offset-sm-0 col-sm-6 col-md-3 mb-3">
        <div class="card">
          <!--                  <img class="card-img-top" src="http://lorempixel.com/200/300/food/2" alt="Card image cap">-->
          <img class="card-img-top" src="lorem/food-2.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Bugbear Bombe</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
              card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-10 offset-1 offset-sm-0 col-sm-6 col-md-3 mb-3">
        <div class="card">
          <!--                  <img class="card-img-top" src="http://lorempixel.com/200/250/food/3" alt="Card image cap">-->
          <img class="card-img-top" src="lorem/food-3.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Fog Potatoes</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
              card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-10 offset-1 offset-sm-0 col-sm-6 col-md-3 mb-3">
        <div class="card">
          <!--                  <img class="card-img-top" src="http://lorempixel.com/200/300/food/4" alt="Card image cap">-->
          <img class="card-img-top" src="lorem/food-4.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Iggeodarin Bread</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
              card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

    </div>

  </section>
  <!-- end section food -->


  <!--PUB ESPECIAL-->

  <div class="container-fluid bg-info py-4">
    <!-- <hr class="my-5"> -->

    <section id="special-pub" class="container pb-4">

      <div class="row">

        <div class="col col-sm-6 ">

          <div class="card text-center">
            <div class="card-header">
              Special Pub Featured
            </div>
            <!-- <img class="card-img-top" src="http://lorempixel.com/300/100/nightlife/3" alt="Card image cap"> -->
            <img class="card-img-top" src="lorem/nightlife-3-100.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Special Pub Beer</h5>
              <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            <div class="card-footer text-muted">
              2 days ago
            </div>
          </div>

        </div>

        <div class="col-sm-6 d-none d-sm-block">

          <div class="card text-center">
            <div class="card-header">
              Special Pub Featured
            </div>
            <!-- <img class="card-img-top" src="http://lorempixel.com/300/100/nightlife/3" alt="Card image cap"> -->
            <img class="card-img-top" src="lorem/nightlife-3-100.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Special Pub Beer</h5>
              <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            <div class="card-footer text-muted">
              2 days ago
            </div>
          </div>

        </div>

      </div>

    </section>


    <section id="pubs" class="container d-none d-md-block">

      <div class="row">

        <div class="card-deck">

          <div class="card">
            <!--                    <img class="card-img-top" src="http://lorempixel.com/300/200/nightlife/2" alt="Card image cap">-->
            <img class="card-img-top" src="lorem/nightlife-2.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Speranza Food Studio</h5>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                additional
                content. This content is a little bit longer.</p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>

          <div class="card">
            <!--                    <img class="card-img-top" src="http://lorempixel.com/300/200/nightlife/3" alt="Card image cap">-->
            <img class="card-img-top" src="lorem/nightlife-3.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Asian Moon</h5>
              <p class="card-text">This card has supporting text below as a natural lead-in to additional
                content.</p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>

          <div class="card">
            <!--                    <img class="card-img-top" src="http://lorempixel.com/300/200/nightlife/10" alt="Card image cap">-->
            <img class="card-img-top" src="lorem/nightlife-10.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">New York Snack Company</h5>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                additional
                content. This card has even longer content than the first to show that equal height action.</p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>

        </div>

    </section>

  </div>

  <!-- end row PUB ESPECIAL-->



  <!-- START THE FEATURETTES -->
  <div class="container">

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod
          semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus
          commodo.</p>
      </div>
      <div class="col-md-5">
        <!--            <img class="featurette-image img-fluid mx-auto" src="http://lorempixel.com/500/500/nightlife/4" alt="Generic placeholder image">-->
        <img class="featurette-image img-fluid mx-auto" src="lorem/nightlife-4.jpg" alt="Generic placeholder image">
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7 order-md-2">
        <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod
          semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus
          commodo.</p>
      </div>
      <div class="col-md-5 order-md-1">
        <!--            <img class="featurette-image img-fluid mx-auto" src="http://lorempixel.com/500/500/nightlife/7" alt="Generic placeholder image">-->
        <img class="featurette-image img-fluid mx-auto" src="lorem/nightlife-7.jpg" alt="Generic placeholder image">
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod
          semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus
          commodo.</p>
      </div>
      <div class="col-md-5">
        <!--            <img class="featurette-image img-fluid mx-auto" src="http://lorempixel.com/500/500/nightlife/5" alt="Generic placeholder image">-->
        <img class="featurette-image img-fluid mx-auto" src="lorem/nightlife-5.jpg" alt="Generic placeholder image">
      </div>
    </div>

    <hr class="featurette-divider">

    <!-- /END THE FEATURETTES -->

  </div>


  <!--FOOTER-->
  <footer class="footer">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
  <!--FOOTER-->


  <!-- modal sign up-->

  <!-- Modal -->
  <div class="modal fade" id="signupModalCenter" tabindex="-1" role="dialog" aria-labelledby="signupModalCenter"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <!--        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>-->
          <h2 class="form-signin-heading">Registre-se</h2>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

          <form class="form-signin">
            <div class="form-group">
              <input type="text" id="inputName" class="form-control" placeholder="Nome" aria-label="Nome">
            </div>


            <div class="form-group">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">@</span>
                </div>
                <label for="inputEmail" class="sr-only">Email</label>
                <input type="email" id="inputEmail" class="form-control" placeholder="Endereço de Email" required
                  autofocus>
              </div>


            </div>

            <div class="form-group">
              <label for="inputPassword" class="sr-only">Senha</label>
              <input type="password" id="inputPassword" class="form-control" placeholder="Senha" required>
            </div>

            <div class="checkbox">
              <label>
                <input type="checkbox" value="remember-me"> Lembrar Senha
              </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Registrar</button>
          </form>
        </div>
        <div class="modal-footer">
          <!--        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
          <button type="button" class="btn btn-info btn-block">Recuperar Senha</button>
        </div>
      </div>
    </div>
  </div>

  <!-- end modal sign up-->



  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>

</body>

</html>